<template>
  <div class="addVideo">
    <el-dialog title="添加宣传视频" :visible.sync="isVisible" @close="closeDialog">
      <el-form
        :model="formdata"
        :rules="rules"
        ref="formdata"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item label="宣传视频" prop="videoUrl">
          <el-upload
            list-type="picture"
            :before-upload="videobefore"
            :on-remove="videoRemove"
            :on-success="videoSuccess"
            :limit="1"
            accept=".mp4"
            :action="action"
            :data="videoData"
            :on-exceed="videoExceed"
          >
            <el-button size="small" plain>选择视频</el-button>
          </el-upload>
          <el-button circle class="iconAlert" @click="videoClain">?</el-button>
        </el-form-item>
        <el-form-item label="视频首帧图片" prop="imageUrl">
          <el-upload
            list-type="picture"
            :on-remove="posterRemove"
            :before-upload="posterbefore"
            :on-success="posterSuccess"
            :limit="1"
            accept=".jpg, .png"
            :action="action"
            :data="posterData"
            :on-exceed="videoExceed"
          >
            <el-button size="small" plain>选择图片</el-button>
          </el-upload>
          <el-button circle class="iconAlert" @click="posterClain">?</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formdata')">添 加</el-button>
        <el-button @click="isVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addpromtoVideo, getlinkgame } from "@/api/gameManage";
export default {
  inject: ["reload"],
  data() {
    return {
      name: "addvideo",
      isVisible: this.isShow,
      formdata: {
        videoUrl: "",
        imageUrl: "",
        gameId: this.dialogRow.id,
        videoName: ""
      },
      options: [],
      rules: {
        videoUrl: [
          { required: true, message: "请添加宣传视频", trigger: "blur" }
        ],
        imageUrl: [
          { required: true, message: "请添加视频首帧图片", trigger: "blur" }
        ]
      },
      action: "https://cpop.zaoyx.com/api/v1/adminrebate/uploadFile",
      videoData: {
        fileType: "video"
      },
      posterData: {
        fileType: "image"
      }
    };
  },
  props: {
    isShow: Boolean,
    dialogRow: Object
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const para = Object.assign({}, this.formdata);
          addpromtoVideo(para)
            .then(res => {
              this.$message({
                message: "创建成功！",
                type: "success"
              });
              setTimeout(() => {
                this.reload();
              }, 20);
            })
            .catch(error => {});
          this.isVisible = false;
        }
      });
    },
    videoRemove(file) {
      this.formdata.videoUrl = "";
    },
    videobefore(file) {
      const isLt15M = file.size / 1024 / 1024 < 30;
      const isMP4 = file.type === "video/mp4";
      if (!isLt15M) {
        this.$message.error("上传视频大小不能超过30M");
      }
      if (!isMP4) {
        this.$message.error("上传视频的格式只能是MP4格式!");
      }

      return isLt15M && isMP4;
    },
    videoSuccess(file) {
        this.formdata.videoUrl = file.data.fileSavePath;
        this.formdata.videoName = file.data.name;
    },
    videoExceed() {
      this.$message.warning(`当前限制只可选择 1 个文件`);
    },
    // 封面上传
    posterRemove(file) {
      this.formdata.imageUrl = "";
    },
    posterbefore(file) {
      let _this = this;
      if (file.type.indexOf("image") < 0) {
        this.$message.error("上传图片只能是JPG或PNG格式");
        return false;
      }
      const isLt200K = file.size / 1024 < 500;
      if (!isLt200K) {
        this.$message.error("上传图片大小不能超过500K");
        return false;
      }
      const isSize = new Promise(function(resolve, reject) {
        let width = 1280;
        let height = 720;
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width == width && img.height == height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        () => {
          this.$message.error("上传的图片不符合规格!");
          return Promise.reject();
        }
      );
      return isSize;
    },
    posterSuccess(file) {
      this.formdata.imageUrl = file.data.fileSavePath;
    },
    // 视频要求
    videoClain() {
      this.$alert(
        "游戏视频格式：MP4；</br>大小：30M以内；</br>分辨率：1280 x 720px及以上；",
        "宣传视频要求",
        {
          dangerouslyUseHTMLString: true
        }
      );
    },
    // 封面要求
    posterClain() {
      this.$alert(
        "该图片用在游戏视频第一帧；</br>推广图1尺寸为 1280x720px，格式必须为 JPG 或 PNG。最大500K；</br>宣传的主要内容（ 如游戏Logo、主要人物等 ）",
        "游戏首帧图片",
        {
          dangerouslyUseHTMLString: true
        }
      );
    }
  }
};
</script>
<style lang="scss">
.addVideo {
  .el-input,
  .el-select {
    width: 205px;
  }
  .el-input__inner {
    color: #a5a4bf;
    border: 1px solid #a5a4bf;
    height: 35px;
  }
  .el-input__inner::placeholder {
    color: #a5a4bf;
  }
  .el-form-item__label {
    color: #3c3b54;
  }
  .el-form-item__content {
    .iconAlert {
      position: absolute;
      padding: 0;
      top: 5px;
      left: 230px;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
    }
  }
  .el-form {
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .el-upload {
    .el-button {
      padding: 10px 77px;
      color: #a5a4bf;
      border: 1px solid #a5a4bf;
      font-size: 12px;
    }
  }
  .el-upload-list__item {
    width: 50%;
  }
}
</style>